{% extends 'base.html' %}

{% block title %}Representative Locator{% endblock %}

{% block extra_head %}
<script src="http://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_KEY }}&amp;sensor=true" type="text/javascript"></script>
<script type="text/javascript">
{# this is a template because it uses some Django tags #}
{% include 'reploc/locator.js' %}
</script>
{% endblock %}

{% block content %}
<h2>Representative Locator</h2>

<p>Please enter an address in the box below and choose a radius to search within.</p>
<form action="." method="post">
    {% csrf_token %}
    <label for="reference-address">Address: </label>
    <input type="text" id="reference-address" />

    <label for="reference-radius">Radius: </label>
    <!-- TODO: work with KM //-->
    <select id="reference-radius">
        <option value="5">5 miles</option>
        <option value="10">10 miles</option>
        <option value="25">25 miles</option>
        <option value="50">50 miles</option>
        <option value="100">100 miles</option>
        <option value="250">250 miles</option>
        <option value="500">500 miles</option>
        <option value="1000">1000 miles</option>
    </select>

    <input type="button" value="Find Representatives" id="find-locations" />
    <input type="button" value="Reset Map" id="reset-locations" />
    <img src="{{ STATIC_URL }}img/ajax.gif" height="25" width="25"
        alt="Loading..." id="ajax-progress"
        style="float:right; margin-top: -30px; display: none;" />
</form>
<div id="location-matches"></div>
<div style="clear:both"></div>

<div id="representative-map" style="width: 690px; height: 500px; margin-top:
    20px;">This page requires a modern browser which supports Google Maps!</div>
<h3 id="directions-title"></h3>
<div id="location-directions"></div>
{% endblock %}
